<template>
  <view class="content" id="content" v-show="show" :style="backgroundStyle">
    <!--    首次进入通知-->
    <view class="message1" v-show="showMessage1">
      <view class="text">
        <view class="text-1">点赞、评论、关注、转发</view>
        <view class="text-2">
          可以领取积分和达人徽章值<br/>
          互动越多惊喜更多哟！<br/>
          等你来发现
        </view>
      </view>
      <view class="msg" @click="toRole">查看领取奖励规则</view>
      <view class="button" @click="cloe">去发现</view>
      <view class="cloe" @click="cloe"></view>
    </view>
    <!--    首次评论-->
    <view class="message2" v-show="showMessage2">
      <view class="title">首次评论额外奖励了<br/>
        <text>20</text>
        积分呦～
      </view>
      <view class="text">本周在不同话题分别发
        <text>5</text>
        个图文或视频的优质评价，可以额外获得
        <text>20</text>
        积分，和评论达人徽章哟～
      </view>
      <view class="button" @click="lastPage">我知道了</view>
      <view class="cloe" @click="lastPage"></view>
    </view>
    <!--    弹框-->
    <view class="message3" v-show="showMessage3">
      <view class="message-box">
        <view class="title">提示</view>
        <view class="text">
          <slot></slot>
        </view>
      </view>
      <view class="button" @click="lastPage">我知道了</view>
    </view>
    <!--    评论大人物-->
    <view class="message4" v-if="showMessage4">
      <view class="p-box">
        <view class="star-list">
          <view class="star-item" :id="'star-item-'+(index+1)" :style="'margin-top: '+item+';'"
                v-for="(item,index) in starList">
            <image :src="image_host+(index<commentGrade-1?'xing2.png':'xing1.png')"></image>
          </view>
        </view>
        <view class="icon">
          <image mode="aspectFit" :style="iconStyle" :src="image_host+'pinglundaren.png'"></image>
          <image mode="aspectFit" class="bjGIF" :src="image_host+'guang.gif'"></image>
        </view>
        <view class="xing2" :style="xing2Style">
          <image mode="aspectFit" :src="image_host+'xing2.png'"></image>
        </view>
        <view class="message-box">评论达人V{{ commentGrade }}</view>
        <view class="msg">恭喜您！点亮评论达人徽章一星</view>
        <view class="date">{{ time }}s自动关闭</view>
      </view>
    </view>
    <!--    闪耀达人-->
    <view class="message5" v-show="showMessage5">
      <view class="icon-box" id="shine-icon"></view>
      <view class="message">恭喜您！获取闪耀达人{{ shineGrade }}级徽章</view>
      <view class="list">
        <view class="item" :style="'width:'+item+';'+(shineGrade===(index+1)?'opacity: 0.4;':'')"
              v-for="(item,index) in shineList">
          <image :id="'items-'+(index+1)" mode="heightFix" :src="image_host+'icon_shanyaohui'+(index+1)+'.png'"></image>
          <view class="text">v{{ index + 1 }}</view>
        </view>
      </view>
      <view class="date">{{ time }}s自动关闭</view>
    </view>
    <view class="message5" v-show="showMessage6">
      <view class="bj">
        <view class="box">
          参加pk我方取得胜利获得
          <text>{{ Integral }}</text>
          积分奖励
        </view>
        <view class="date">{{ time }}s自动关闭</view>
      </view>
    </view>
    <view class="donghua-box" v-if="showDonghua" :style="donghuaStyle">
      <image mode="aspectFit" :src="image_host+'icon_shanyaohui'+shineGrade+'.png'"></image>
      <image mode="aspectFit" class="bjGIF" :src="image_host+'guang.gif'"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      showMessage1: false,
      showMessage2: false,
      showMessage3: false,
      showMessage4: false,
      showMessage5: false,
      showMessage6: false,
      showDonghua: false,
      starList: ['150rpx', '50rpx', '0rpx', '50rpx', '150rpx'],
      image_host: this.image_host + 'quanzi/',
      commentGrade: 0,
      shineGrade: 0,
      xing2Style: "",
      iconStyle: "",
      donghuaStyle: "",
      shineList: ['98rpx', '104rpx', '116rpx', '94rpx', '127rpx'],
      backgroundStyle: "",
      time: 4,
      timeObj: {},
      Integral: 0
    };
  },
  created() {
    // setTimeout(()=>{
    // this.showComment(2)
    // this.showShine(4)
    // },2000)
  },
  methods: {
    init() {
      this.showMessage1 = false
      this.showMessage2 = false
      this.showMessage3 = false
      this.showMessage4 = false
      this.showMessage5 = false
      this.showMessage6 = false
      this.showDonghua = false
      this.time = 4
      return new Promise((resolve, reject) => {
        this.show = true;
        setTimeout(() => {
          this.backgroundStyle = "background-color: rgba(0,0,0,.8)"
          setTimeout(() => {
            return resolve(true)
          }, 300)
        }, 100)
      })
    },
    async SshowComment() {
      await this.init()
      this.showMessage2 = true
    },
    async showMessage3F() {
      await this.init()
      this.showMessage3 = true
    },
    async showIndex() {
      await this.init()
      this.showMessage1 = true
    },
    async showMessage6F(Integral) {
      this.Integral = Integral
      await this.init()
      this.showMessage6 = true
      this.setTime()
    },
    async showComment(commentGrade) {
      await this.init()
      this.showMessage4 = true
      this.commentGrade = commentGrade
      let _this = this
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(_this);
        query.select('#star-item-' + commentGrade).boundingClientRect(data => {
          let {left} = data
          this.xing2Style = `width: 92rpx;height: 87rpx;top: ${_this.starList[commentGrade - 1]};left: ${left}px;transform: scale(1);`;
          this.iconStyle = `perspective: 1000px;transform:scale(1) rotateY(360deg)`;
          this.setTime()
        }).exec();
      })
    },
    async showShine(shineGrade) {
      await this.init()
      this.showMessage5 = true;
      this.shineGrade = shineGrade;
      let _this = this;
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(_this);
        query.select('#items-' + shineGrade).boundingClientRect(data => {
          let {left, top, width, height} = data
          this.donghuaStyle = `left: ${left}px;top: ${top}px;width: ${width}px;height: ${height}px;`
          this.showDonghua = true;
          setTimeout(() => {
            this.setShineStyle()
          }, 200)
        }).exec();
      })
    },
    setShineStyle() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#shine-icon').boundingClientRect(data => {
        let {left, top, width, height} = data
        this.donghuaStyle = `left: ${left}px;top: ${top}px;width: ${width}px;height: ${height}px;perspective: 1000px;transform:rotateY(360deg)`
        this.setTime()
      }).exec();
    },
    setTime() {
      this.timeObj = setInterval(() => {
        this.time--
        if (this.time <= 0) {
          clearInterval(this.timeObj)
          this.show = false
        }
      }, 1000)
    },
    toRole() {
      this.show = false
      uni.navigateTo({url: '/pages/circle/role'})
    },
    lastPage() {
      uni.navigateBack()
      this.cloe()
    },
    cloe() {
      this.show = false
    }
  }
}
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 21;
  transition: all .3s linear;
}

.message1 {
  width: 644upx;
  height: 778upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/quanzi/q_bg_shoutankuang@2x.png");
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;

  .text {
    border-radius: 10upx;
    border: 1upx solid #979797;
    margin-top: 222upx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 37upx 10upx;

    .text-1 {
      font-size: 42upx;
      color: #F5A623;
      font-weight: 500;
      margin-bottom: 24upx;
    }

    .text-2 {
      font-size: 42upx;
      color: #333;
      text-align: center;
    }
  }

  .msg {
    font-size: 30upx;
    color: #4A90E2;
    text-decoration: underline;
    margin-top: 24upx;
  }

  .button {
    font-size: 42upx;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 4upx 10upx rgba(0, 67, 29, 0.4);
    background: linear-gradient(180deg, #52E883 0%, #04AA3B 100%);
    box-shadow: 0upx 4upx 10upx 0upx rgba(0, 67, 29, 0.4), inset 0upx 5upx 5upx 0upx #5AFF6A;
    border-radius: 45upx;
    width: 428upx;
    height: 98upx;
    line-height: 98upx;
    text-align: center;
    margin-top: 20upx;
  }

  .cloe {
    width: 80upx;
    height: 80upx;
    position: absolute;
    bottom: -120upx;
    left: 50%;
    transform: translate(-50%, 0%);
    background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/quanzi/icon_cloes@2x.png");
    background-size: 100% 100%;
  }
}

.message2 {
  width: 614upx;
  height: 748upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/quanzi/q_bg_shoutankuang2.png");
  background-size: 100% 100%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-items: center;
  padding-top: 171upx;

  .title {
    font-size: 50upx;
    color: #333333;
    font-weight: 600;
    text-align: center;

    text {
      color: #FE9722;
    }
  }

  .text {
    width: 520upx;
    background-color: #E4F0E8;
    box-sizing: border-box;
    padding: 24upx 20upx;
    font-size: 38upx;
    color: #333;
    font-weight: 400;

    text {
      color: #FE9722;
    }
  }

  .button {
    font-size: 42upx;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 4upx 10upx rgba(0, 67, 29, 0.4);
    background: linear-gradient(180deg, #52E883 0%, #04AA3B 100%);
    box-shadow: 0upx 4upx 10upx 0upx rgba(0, 67, 29, 0.4), inset 0upx 5upx 5upx 0upx #5AFF6A;
    border-radius: 45upx;
    width: 428upx;
    height: 98upx;
    line-height: 98upx;
    text-align: center;
    margin-top: 20upx;
  }

  .cloe {
    width: 80upx;
    height: 80upx;
    position: absolute;
    bottom: -120upx;
    left: 50%;
    transform: translate(-50%, 0%);
    background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/quanzi/icon_cloes@2x.png");
    background-size: 100% 100%;
  }
}

.message3 {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 8upx;
  width: 610upx;

  .message-box {
    box-sizing: border-box;
    padding: 36upx 50upx 25upx 50upx;

    .title {
      font-size: 38upx;
      color: #333333;
      font-weight: 500;
      width: 100%;
      text-align: center;
      margin-bottom: 32upx;
    }

    .text {
      font-size: 42upx;
      color: #333333;

      text {
        color: #FE9722;
      }
    }
  }

  .button {
    width: 100%;
    height: 100upx;
    box-sizing: border-box;
    border-top: 1upx solid #E6E8F1 !important;
    text-align: center;
    line-height: 100upx;
    font-size: 40upx;
    color: #5CAE77 !important;
    font-weight: 500;
    background: #fff !important;
    border-radius: 0 !important;
  }
}

.message4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .p-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .star-list {
    display: flex;
  }

  .star-item {
    margin: 0 4upx;
  }

  .star-item {
    width: 92upx;
    height: 87upx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .icon {
    width: 342upx;
    height: 380upx;
    margin-top: -87upx;
    position: relative;

    image {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      transition: all 1s linear;
      transform: scale(0) rotateY(0deg);
    }

    .bjGIF {
      width: 300upx;
      height: 300upx;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(2.5);
      z-index: 1;
    }
  }

  .message-box {
    height: 82upx;
    box-sizing: border-box;
    padding: 0 21upx;
    font-size: 48upx;
    color: #9C461D;
    font-weight: 700;
    background-color: #FAD2B4;
    border: 6upx solid #E98C68;
    border-radius: 8upx;
    transform: scale(.8);
    animation: scales .5s forwards;
  }

  .msg {
    width: 100vw;
    font-size: 32upx;
    color: #fff;
    font-weight: 700;
    margin-top: 33upx;
    text-align: center;
    animation: donghua .5s forwards;
  }

  .date {
    font-size: 38upx;
    color: #999;
    font-weight: 500;
    margin-top: 111upx;
  }

  .xing2 {
    position: absolute;
    width: 92rpx;
    height: 87rpx;
    transition: all .8s linear;
    top: 88px;
    left: 117px;
    z-index: 10;
    transform: scale(2.5);

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.message5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;

  .icon-box {
    width: 391upx;
    height: 389upx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .message {
    width: 100vw;
    font-size: 44upx;
    text-align: center;
    color: #fff;
    font-weight: 700;
    margin-top: 66upx;
    animation: donghua .5s forwards;
  }

  .list {
    display: flex;
    align-items: center;
    justify-content: center;
    column-count: 5;
    column-gap: 26upx;
    margin-top: 74upx;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: auto;
        height: 104upx;
        margin-bottom: 29upx;
      }

      .text {
        color: #999999;
        font-size: 42upx;
        font-weight: 600;
        //margin-top: 29upx;
      }
    }
  }

  .date {
    font-size: 38upx;
    color: #999;
    font-weight: 500;
    margin-top: 111upx;
  }
}

.donghua-box {
  position: absolute;
  height: 104upx;
  transition: all .4s linear;

  image {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
  }

  .bjGIF {
    width: 300upx;
    height: 300upx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2.5);
    z-index: 1;
  }
}

@keyframes donghua {
  0% {
  }
  100% {
    font-size: 42upx;
  }
}

@keyframes scales {
  100% {
    transform: scale(1);
  }
}

.bj {
  width: 667upx;
  height: 671upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/template/tankuang_bg@2x.png");
  background-size: 100% 100%;
  position: relative;

  .box {
    position: absolute;
    width: 506upx;
    height: 292upx;
    border: 6upx solid #DFCF89;
    border-radius: 8upx;
    left: 50%;
    top: 242upx;
    transform: translate(-50%, 0);
    font-size: 48upx;
    color: #333333;
    box-sizing: border-box;
    padding: 42upx 20upx;

    text {
      color: #FE9722;
    }
  }

  .date {
    position: absolute;
    top: 570upx;
    width: 100%;
    text-align: center;
  }
}
</style>
